import "./index.css";
import { defineComponent, Transition, h } from "vue";

export default defineComponent({
  name: "ReCollapseTransition",
  render() {
    const transitionStyle = "0.3s height";
    const TransitionEvents = {
      onBeforeEnter(el) {
        el.style.transition = transitionStyle;
        if (!el.dataset) el.dataset = {};
        el.style.height = 0;
      },
      onEnter(el) {
        if (el.scrollHeight !== 0) {
          el.style.height = `${el.scrollHeight}px`;
        } else {
          el.style.height = "";
        }
        el.style.overflow = "hidden";
      },
      onAfterEnter(el) {
        el.style.transition = "";
        el.style.height = "";
      },
      onBeforeLeave(el) {
        if (!el.dataset) el.dataset = {};
        el.style.height = `${el.scrollHeight}px`;
        el.style.overflow = "hidden";
      },
      onLeave(el) {
        if (el.scrollHeight !== 0) {
          el.style.transition = transitionStyle;
          el.style.height = 0;
        }
      },
      onAfterLeave(el) {
        el.style.transition = "";
        el.style.height = "";
      }
    };
    const t = h(
      Transition,
      {
        ...TransitionEvents
      },
      {
        default: () => [this.$slots.default()]
      }
    );
    return t;
  }
});
